<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('创建专题')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > <a href="/topic.html">专题</a> > 创建专题</p>
    </div>
    <div class="topic-pub">
        <div class="head">
            申请创建专题
        </div>
        <div class="body">
            <form id="topic-form" enctype="multipart/form-data" method="post">
                <div class='ui-text-group'>
                    <input name="title" type="text" class="ui-text" placeholder="请输入专题标题" th:value="${topic.title}" data-valid data-must="#" data-length="2-50" /><span></span>
                    <lable>专题标题，2到50个字之间</lable>
                </div>
                <div class='ui-text-group'>
                    <input name="keyword" type="text" class="ui-text" placeholder="请输入专题关键字" th:value="${topic.keyword}" data-valid data-must="#" data-length="2-50" /><span></span>
                    <lable>关键字，多个关键字用','分开</lable>
                </div>
                <div class='ui-text-group'>
                    <i class="checkbox checked"><span style="color:#f60">自动获取每个文档标题组合为简介</span></i>
                    <textarea name="word" class="ui-text" disabled="disabled" placeholder="请输入专题介绍" data-valid data-must="#" data-length="2-500" th:text="${topic.word}"></textarea><span></span>
                    <lable>专题介绍，2到500个字之间</lable>
                </div>
                <div class='ui-text-group'>
                    <div class="type">

                        <div th:each="item :${topic_type_array}"  class="ui-checkbox" th:classappend="${topic.typeid}==${item.typeid}?'checked'"  group='1' th:attr="data-id=${item.typeid}"><i></i><span th:text="${item.typename}"></span></div>

                    </div><span></span>
                    <lable>分类，请选择一种分类</lable>
                    <input type="hidden" name="typeid"  th:value="${topic.typeid}?${topic.typeid}:''"  />
                    <input type="hidden" name="topicid"  th:value="${topic.topicid}?${topic.topicid}:''"  />
                </div>
                <div class='ui-text-group'>
                    <input name="file" type="file" class="ui-text" accept="image/png,image/jpg,image/jpeg,image/gif" th:if="${topic} ? '':'data-valid data-must=#'" /><span></span>
                    <lable>封面，350px(宽)*200px(高)，大小1M内</lable>
                </div>
                <div class='ui-text-group'>
                    <input name="downpay" type="number" class="ui-text" th:attr="placeholder=${systradesets.glodname}"  th:value="${topic}?${topic.downpay} :''" data-valid data-reg="^\d+(\.\d+)?$" data-reg-msg="请输入正确的价格" /><span></span>
                    <lable>(<span th:text="${systradesets.glodunit}" th:remove="tag"></span> ) 打包下载价格</lable>
                    <input name="discount" type="number" class="ui-text" placeholder="%" th:value="${topic}?${topic.discount} :''" data-valid data-reg="^((0\.\d+)|0|1)$" data-reg-msg="请输入0-1之间的数" /><span></span>
                    <lable>打包下载折扣，0-1之间</lable>
                    <p class="tip">打包价格和打包折扣只需设置一个，另一个会根据文档数量和价格进行计算,都不设置,打包价格=文档总价</p>
                </div>
                <div class="panel-doc">
                    <h5>
                        <a href="javascript:;" class="doc-add" modal-dialog="{title:'选择文档',body:'/select.html',click:select_docs}"><i class="fa fa-plus"></i> 添加我的文档</a>
                        <input type="text" class="ui-text txt-doc" placeholder="或黏贴文档地址" data-valid data-reg="doc\/\d+.html$" data-reg-msg="请黏贴正确的文档地址" />
                        已添加<ss>0</ss>篇文档
                        <a href="javascript:;" class="doc-del"><i class="fa fa-trash-o fa-lg"></i> 一键清空</a>
                    </h5>
                    <ul></ul>
                    <input type="hidden" name="docs" value="" />
                </div>
                <a href="javascript:;" class="ui-btn ui-btn-blue fr">创建专题</a>
            </form>
        </div>
        <div class="finish">
            <p class="p1"><i class="fa fa-check-circle-o"></i>您的专题创建成功</p>
            <p class="p2"> <a th:if="${ispreview}" href="#">立即预览</a><span th:unless="${ispreview}" th:text="审核后,才能在前台显示" th:remove="tag"></span></p>
            <p class="p3"><a href="/user/topic">进入 用户中心->我的专题</a></p>
        </div>
    </div>
</div>
<th:block th:include="pc/include :: footer" />
<script th:src="@{/js/ui-select.js}"></script>
<script>
    var docs = '[(${topic.docs})]'.split(',');
    var checkedWord = true;
    $(function () {

        docs.del2("");
        for (var i = 0; i < docs.length; i++) {
            adddoc(docs[i]);
        }

        $("input[name=title]").change(function () {
            $.get("/fenci/" + $(this).val(), function (keyword) {
                $("input[name=keyword]").val(keyword);
            })
        });

        $(".ui-text-group").on("click", ".checkbox", function () {
            if ($(this).hasClass("checked")) {
                $(this).next().removeAttr("disabled");
                checkedWord = false;
            } else {
                $(this).next().attr("disabled", "disabled");
                checkedWord = true;
            }
        });

        $(".type .ui-checkbox").click(function () {
            if ($(this).hasClass('checked')) {
                $(".type").addClass("error");
            }
            else {
                $(".type").removeClass("error");
            }
        });

        $("input[name=downpay]").change(function () {
            $("input[name=discount]").val('');
        });
        $("input[name=discount]").change(function () {
            $("input[name=downpay]").val('');
        });

        $(".txt-doc").change(function () {
            var doc_url = $(this).val();
            var doc_ids = doc_url.match(/doc\/(\d+).html$/);
            if (doc_ids) {
                if (docs.push2(doc_ids[1])) {
                    adddoc(doc_ids[1]);
                    $(this).val('');
                } else {
                    Message("此文档已添加，勿重复添加");
                }
            } else {
                Message("黏贴地址格式不对，应黏贴文档阅读地址");
            }
        });

        $('.panel-doc h5').delegate(".doc-del", "click", function () {
            docs.length = 0;
            $(".panel-doc ss").text(0);
            $('.panel-doc ul').empty();
        });

        $('.panel-doc ul').delegate(".fa", "click", function () {
            $docid = $(this).parent().attr('data-id');
            docs.del2($docid);
            $(".panel-doc ss").text(docs.length);
            $(this).parent().remove();
        });

        $(".ui-btn").click(function () {

            $form = $("#topic-form");
            $("input[name=title],textarea[name=word],input[name=keyword],input[name=cover]").trigger("change");

            $("input[name=typeid]").val($(".type .checked").attr("data-id"));
            $("input[name=docs]").val(docs);

            $typeid = $("input[name=typeid]").val();
            if (!$typeid) {
                $(".type").addClass("error");
            } else {
                $(".type").removeClass("error");
            }
            $docs = $("input[name=docs]").val();
            if (!$docs) {
                $(".panel-doc").addClass("error");
            } else {
                $(".panel-doc").removeClass("error");
            }

            if ($form.find(".error").length !== 0)
                return;

            $("[name=word]").removeAttr("disabled");

            $.ajax({
                type: "POST",
                url: location.href,
                data: new FormData($form[0]),
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data == -20) {
                        Message('创建专题失败，原因无法打包');
                    } else if (data == -12) {
                        Message('封面图片不能大于1M');
                    } else if (data == -11) {
                        Message('封面图片格式只能是 png,jpg,jpeg,gif 格式');
                    } else if (data == -1) {
                        Message('封面图片上传失败');
                    } else {
                        $(".topic-pub .finish .p2 a").attr("href", "<?php echo $seo->topic ?>" + data + ".html");
                        $(".topic-pub .finish").show();
                        $(".topic-pub .body").hide();
                    }
                }
            });
        });
    });

    function select_docs() {
        $(".select-docs tbody tr").each(function () {
            $this = $(this);
            if ($this.find(".ui-checkbox.checked").length == 1) {
                var id = this.cells[1].innerHTML;
                if (docs.push2(id))
                    adddoc(id);
            }
        });
        HideModal();
    }

    function adddoc(id) {
        $.get("/getdoc.html?docid="+id, function (data) {
            $(".panel-doc ss").text(docs.length);
            if (data.data != '-1') {
                //data = eval('(' + data + ')');
                data = data.data
                $(".panel-doc").removeClass("error");
                $(".panel-doc ul").append('<li data-id=' + data.docid + '><i class="rb ' + data.exten + '"></i><a href="<?php echo $seo->doc ?>' + data.docid + '.html" target="_blank">' + data.title + '</a><i class="fa fa-trash-o fa-lg"></i></li>');
                if (checkedWord) $("[name=word]").val($("[name=word]").val() + data.title + ",");
            } else {
                Message("只能添加自己的文档");
            }
        })
    }

</script>